<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>linkbutton</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>LinkButton</h3>
<p>Override defaults with $.fn.linkbutton.defaults.</p>
<p>
The linkbutton is used to create a hyperlink button. It is a representation of a normal &lt;a&gt; tag.
It can display both an icon and text, or only the icon or text.
The button width can dynamic and shrink/expand to fit its text labels.
</p>
<img src="images/linkbutton.png">

<h4>Usage Example</h4>
<h5>Create linkbutton</h5>
<p>
Create a linkbutton from markup is more easily.
</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"btn"</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-linkbutton"</span><span>&nbsp;</span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-search'"</span><span class="tag">&gt;</span><span>easyui</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-linkbutton" style="display: none;">	&lt;a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"&gt;easyui&lt;/a&gt;
</textarea>
<p>
Create a linkbutton programmatically is also allowed.
</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>&lt;a&nbsp;id=</span><span class="string">"btn"</span><span>&nbsp;href=</span><span class="string">"#"</span><span>&gt;easyui&lt;/a&gt;&nbsp;&nbsp;</span></span></li><li class=""><span>$(<span class="string">'#btn'</span><span>).linkbutton({&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;iconCls:&nbsp;<span class="string">'icon-search'</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-linkbutton" style="display: none;">	&lt;a id="btn" href="#"&gt;easyui&lt;/a&gt;
	$('#btn').linkbutton({
		iconCls: 'icon-search'
	});
</textarea>
<br>
<h5>Process clicking on linkbutton.</h5>
<p>Clicking on linkbutton will send the user to other page.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">"otherpage.php"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-linkbutton"</span><span>&nbsp;</span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-search'"</span><span class="tag">&gt;</span><span>easyui</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-linkbutton" style="display: none;">	&lt;a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'"&gt;easyui&lt;/a&gt;
</textarea>
<p>The example below will alert a message.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-linkbutton"</span><span>&nbsp;</span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-search'"</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="attribute">onclick</span><span>=</span><span class="attribute-value">"javascript:alert('easyui')"</span><span class="tag">&gt;</span><span>easyui</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-linkbutton" style="display: none;">	&lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
			onclick="javascript:alert('easyui')"&gt;easyui&lt;/a&gt;
</textarea>
<p>Bind click handler using jQuery.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"btn"</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-linkbutton"</span><span>&nbsp;</span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"iconCls:'icon-search'"</span><span class="tag">&gt;</span><span>easyui</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-linkbutton" style="display: none;">	&lt;a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"&gt;easyui&lt;/a&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;$(<span class="string">'#btn'</span><span>).bind(</span><span class="string">'click'</span><span>,&nbsp;</span><span class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'easyui'</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;</span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-linkbutton" style="display: none;">$(function(){
	$('#btn').bind('click', function(){
		alert('easyui');
	});
});
</textarea>


<br>
<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>

<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>id</td>
<td>string</td>
<td>The id attribute of this component.</td>
<td>null</td>

</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>True to disable the button</td>
<td>false</td>
</tr>
<tr>
<td>plain</td>
<td>boolean</td>
<td>True to show a plain effect.</td>

<td>false</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The button text.</td>
<td>''</td>
</tr>
<tr>
<td>iconCls</td>
<td>string</td>

<td>A CSS class to display a 16x16 icon on left.</td>
<td>null</td>
</tr>
<tr>
<td>iconAlign</td>
<td>string</td>
<td>
Position of the button icon. Possible values are: 'left','right'.
This property is available since version 1.3.2.
</td>
<td>left</td>
</tr>
</tbody></table>

<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>

<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return options property.</td>
</tr>
<tr>
<td>disable</td>
<td>none</td>

<td>
Disable the button.
<p>Code example:</p>
<pre>$('#btn').linkbutton('disable');
</pre>
</td>
</tr>
<tr>
<td>enable</td>
<td>none</td>
<td>
Enable the button.
<p>Code example:</p>
<pre>$('#btn').linkbutton('enable');
</pre>
</td>
</tr>
</tbody></table>

</div>
</body>
</html>